import { useEffect, useState } from "react";
import { useHistory, useLocation } from "react-router";
import { NavBar,Image } from 'antd-mobile'
import Sty from "../../style/square/squareDetail.module.css";
import { EyeOutline } from 'antd-mobile-icons'


export default () => {
  let location = useLocation();
  let history = useHistory()
  let { state } = location
  
  const [detailData,setDetailData]:any=useState({ id: 1, nickAttr: require("../../images/20211220102552.jpg").default, nickName: '你得支棱起来啊', time: '2019-8-20', fans: 123, follow: 123, fabulous: 123, see: 123, comment: 123, img_src: require("../../images/TopBan.png").default, des: '“那年的秋季特别长，像一段雏形的永恒。我几乎以为，站在四围的秋色里，那种圆溜溜的成熟感，会永远悬在那里，不坠下来。终于一切瓜一切果都过肥过重了，从腴沃中升起来的仍垂向腴沃。每到黄昏，太阳也垂垂落向南瓜田里，红橙橙的，一只熟得不能再熟下去的，特大号的南瓜。日子就像这样过去。晴天之后仍然是晴天之后仍然是完整无憾饱满得不能再饱满的晴天，敲上去会敲出音乐来的稀金属的晴天。就这样微酩地饮着清醒的秋季，好怎么不好，就是太寂寞了。在西密歇根大学，开了三门课，我有足够的时间看书，写信。但更多的时间，我用来幻想，而且回忆，回忆在有一个岛上做过的有意义和无意义的事情，一直到半夜，到半夜以后。有些事情，曾经恨过的，再恨一次；曾经恋过的，再恋一次；有些无聊，甚至再无聊一次。一切都离我很久，很远。”' })
  useEffect(() => {
     setDetailData(state)
   },[])
  const back = () => history.goBack();
  
  return <>
   
    <div className={Sty.top}>
       <NavBar onBack={back}>话题详情</NavBar>
    </div>
    
    <div className={Sty.detail_box}>
      <p className={Sty.top_time}>发布时间:{ detailData.time}</p>
      <div className={Sty.top_banner}>
        <img src={detailData.img_src} alt=""/>
      </div>
      
      <div className={Sty.detailData_des}>
        {detailData.des}
      </div>
      <div className={Sty.user_r_box}>
            <div> <i className={Sty.fabulous}></i><span>{ detailData.fabulous}</span></div>
            <div>
              <EyeOutline fontSize={12} />
              <span></span>{detailData.see}</div>
          <div><i className={Sty.common}></i><span></span>{detailData.comment}</div>
          
        </div>
      <div className={Sty.detailData_publisher}>
        <div className={Sty.detailData_publisher_title}>发布人</div>
         <div className={Sty.user}>
          <div className={Sty.user_l_box}>
               <div className={Sty.user_l}>
            <Image
            src={detailData.nickAttr}
            width={32}
            height={32}
            fit='cover'
            style={{ borderRadius: 16 }} />
          </div>
          <div className={Sty.user_r}>
            <p>{ detailData.nickName}</p>
            <p className={Sty.user_r_b}><span>粉丝:{detailData.fans}</span>关注:{detailData.follow}<span></span></p>
          </div>
          </div>
          <div className={Sty.user_r_item}>+关注</div>
        </div>

      </div>
      {/* 留言 */}
       <div className={Sty.detailData_publisher}>
        <div className={Sty.detailData_publisher_title}>全部评论</div>
        <ul>
        <li className={Sty.leavingItem}>
            <div className={Sty.user}>
          <div className={Sty.user_l_box}>
               <div className={Sty.user_l}>
            <Image
            src={detailData.nickAttr}
            width={32}
            height={32}
            fit='cover'
                   style={{ borderRadius: 16 }} />
         <div className={Sty.nickName}>{ detailData.nickName}</div>
          </div>
          </div>
          <div className={Sty.user_r_item1}><i></i></div>
            </div>
             <div className={Sty.leaving}>
            { detailData.des}
          </div>
          </li>
         
         <li className={Sty.leavingItem}>
            <div className={Sty.user}>
          <div className={Sty.user_l_box}>
               <div className={Sty.user_l}>
            <Image
            src={detailData.nickAttr}
            width={32}
            height={32}
            fit='cover'
                   style={{ borderRadius: 16 }} />
                  <div className={Sty.nickName}>{ detailData.nickName}</div>
          </div>
          </div>
          <div className={Sty.user_r_item1}><i></i></div>
            </div>
             <div className={Sty.leaving}>
            { detailData.des}
          </div>
          </li>
         
         
        </ul>

      </div>
    
    </div>
      <div className={Sty.other}>
      <div className={Sty.other_title}>-其他话题-</div>
      <ul>
        <li>

        </li>
      </ul>
      </div>
    {/* 内容 */}
    <div className={Sty.detailData_bottom}>
      <div className={Sty.detailData_bottom_l}>
        <div><i></i><p>点赞</p></div>
        <div><i className={Sty.pl_bck}></i><p>评论</p></div>
        <div><i className={Sty.sc_bck}></i><p>收藏</p></div>
      </div>
      <div className={Sty.detailData_bottom_r}>
        我想要
      </div>
    </div>
  </>
}